<template>
  <div class="three-bounce">
    <div class="bounce bounce1"></div>
    <div class="bounce bounce2"></div>
    <div class="bounce bounce3"></div>
  </div>
</template>
<style lang="scss" scoped>
@keyframes bouncedelay {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
.three-bounce {
  text-align: center;
  .bounce {
    display: inline-block;
    width: 20rpx;
    height: 20rpx;
    border-radius: 100%;
    background-color: #aaa;
    animation: bouncedelay 1.4s infinite ease-in-out;
    &.bounce1 {
      animation-delay: -0.32s;
    }
    &.bounce2 {
      animation-delay: -0.16s;
    }
  }
}
</style>
